<template>
  <view class="m-t40">
    <view class="flex">
      <view class="line" />
      <text class="text-700-130">最新动态</text>
    </view>

    <view class="section">
      <view
        v-for="item in list"
        :key="item.id"
        class="card flex"
        data-url="pages/gjfdlkjs"
        @click="goto">
        <image class="cover" src="https://cdn.uviewui.com/uview/swiper/swiper1.png" mode="aspectFill" />

        <view class="flex-1 flex-d-sb h-130 m-l20">
          <text class="text-700-130">{{ item.id }}</text>
          <text class="text-400-128">{{ item.intro }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { useNavigator } from '@/hooks/use-navigator'
  import { useRequest } from '@/hooks/use-request'

  type DongtaiRecord = {
    id: number;
    title: string;
    intro: string;
  }

  const { goto } = useNavigator()

  const { data: list } = useRequest<DongtaiRecord[]>(() => uni.$u.get('/dongtai/lst'), [])
</script>

<style lang="scss" scoped>
	.line {
		width: 8rpx;
		height: 26rpx;
		margin-right: 20rpx;
		background-color: $bg-color-2;
	}

	.section {
		margin-top: 30rpx;
		padding: 0 20rpx;
		border-radius: 20rpx;
		background-color: $bg-color-1;

		.card {
			height: 190rpx;
			border-bottom: 1rpx solid $border-color-4;

			&:last-child {
				border: none;
			}

			.cover {
				width: 148rpx;
				height: 148rpx;
				border-radius: 10rpx;
				border: 1rpx solid $border-color-4;
			}
		}
	}
</style>
